<!DOCTYPE html>
<html lang="en">

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
    <meta name='apple-mobile-web-app-capable' content='yes'>
    <meta name='apple-mobile-web-app-status-bar-style' content='black'>
    <meta name='format-detection' content='telephone=no'>
    <meta charset="utf-8">
    <title>小视频传播力</title>

    <!-- Favicons -->
    <link href="img/favicon.png" rel="icon">
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--external css-->
    <link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/zabuto_calendar.css">
    <link rel="stylesheet" type="text/css" href="lib/gritter/css/jquery.gritter.css"/>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">

    <!--我的-->
    <link rel="stylesheet" type="text/css" href="mycss/reset.css">
    <link rel="stylesheet" type="text/css" href="mycss/style.css">

    <link rel="stylesheet" type="text/css" href="mycss/my.css">
    <script src="lib/highcharts.src.js"></script>

</head>

<body class="all_default_font" style="position: relative">


<section id="container">

    <!--header start-->
    <header class="header black-bg">
        <!--浮动球-->
        <div class="chonghe_panel">
            <div id="chong_btn"
                 style="display: inline-block; height: 40px;width: 70px;background-color:#7096ff;border-radius: 20px  0px 0px 20px;text-align: center;line-height: 40px;box-shadow: 0 0 10px #aaa">
                重合度
            </div>
            <div style="position: absolute;display: inline-block;box-shadow: 0 0 10px #aaa">
                <div id="fan_press_panel" style="position:relative;width: 200px;height: 200px;"></div>
            </div>
        </div>
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
        </div>
        <!--logo start-->
        <a href="page/index.html" class="logo"><b><span>小视频传播力</span></b></a>
        <!--logo end-->
        <div class="nav notify-row" id="top_menu">
            <!--  notification start -->
            <ul class="nav top-menu">
                <!--暂无组件-->
            </ul>
            <!--  notification end -->
        </div>
        <div class="top-menu ">
            <ul class="nav pull-right top-menu">
                <li class="dropdown" style="margin-top: 10%;position: relative">
                    <a href="#">
                        候选达人
                        <span class="badge" style="position:absolute;top: -8px;right: -8px">7</span>
                    </a>

                </li>
                <li><a class="logout" href="page/login.html">Logout</a></li>
            </ul>

        </div>
    </header>
    <!--header end-->
    <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">
                <h5 class="centered">跳转路径</h5>
                <li class="mt">
                    <a class="active" href="page/index.html">
                        <i class="fa fa-dashboard"></i>
                        <span>主页</span>
                    </a>
                </li>

                <li>
                    <a href="page/profile.html">
                        <i class="fa fa-address-card-o" aria-hidden="true"></i>
                        <span>达人信息 </span>
                    </a>
                </li>
                <li>
                    <a href="acompute.html">
                        <i class="fa fa-map-marker"></i>
                        <span>计算1 </span>
                    </a>
                </li>
                <li>
                    <a href="page/settlement.html">
                        <i class="fa fa-calculator" aria-hidden="true"></i>
                        <span>结算 </span>
                    </a>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->
    <!-- **********************************************************************************************************************************************************
        MAIN CONTENT
        *********************************************************************************************************************************************************** -->
    <!--main content start-->

    <section id="main-content" style="background-color:#EAEAEA;">
        <section class="wrapper">

            <!--搜索栏-->
            <div style="width: 100%;margin-bottom: 20px;margin-top:5px;background-color:#fff;">
                <ul class="nav nav-tabs default_font">
                    <li role="presentation" class="active default_active_font"><a href="#">抖音</a></li>
                    <li role="presentation"><a href="#">快手</a></li>
                    <li role="presentation"><a href="#">火山小视频</a></li>
                </ul>
                <div style="float: right;top: -38px;position: relative">
                    <div class="input-group search-inputs" style="width: 250px;">
                        <input type="text" class="form-control" placeholder="搜索达人..."/>
                        <span class="input-group-btn">
                <button class="btn btn-default search-input-btn" type="button">Go!</button>
            </span>
                    </div><!-- /input-group -->
                </div>
                <!--多条删选-->
                <div id="searchcon" style="width: 100%"></div>

                <div style="font-size:14px">
                    <button id="data_btn" type="button" class="btn btn-primary"
                            style="margin-top: 0px;margin-left: 10px;"
                            onclick="switch_panel(0)">达人列表
                    </button>
                    <button id="type_property_btn" type="button" class="btn btn-default"
                            style="border-width: 0px;"
                            onclick="switch_panel(1)">
                        行业总览
                    </button>
                </div>
                <div style="height: 10px;"></div>
            </div>
            <!--达人列表-->
            <div id="data_panel" style="display: block">
                <nav class="navbar navbar-default" style="margin-bottom: 0px;">
                    <div class="row">
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                            <p class="col-xs-4 col-md-2 col-md-offset-4 zero_padding navbar-text navbar-right"
                               style="margin-left: 0px;">
                                <a href="#" class="navbar-link">价值/报价
                                    <i class="fa fa-angle-down "></i>&nbsp;&nbsp;&nbsp;&nbsp;
                                </a>
                            </p>
                            <p class="col-xs-4 col-md-2 zero_padding navbar-text navbar-right"
                               style="margin-left: 0px;">
                                <a href="#" class="navbar-link">粉丝量
                                    <i class="fa fa-angle-down "></i>
                                </a>
                            </p>
                            <p class="col-xs-4 col-md-2 zero_padding navbar-text navbar-right"
                               style="margin-left: 0px;">
                                <a href="#" class="navbar-link">综合排序
                                    <i class="fa fa-angle-down "></i>
                                </a>
                            </p>
                        </div>
                    </div>
                </nav>

                <!--数据栏-->

                <div class="list-group" style="margin-bottom: 0px;">
                    <button type="button" class="list-group-item"
                            style="position: relative;margin: 0!important;padding: 0!important;border-width: 0px;">
                        <div class="row">
                            <div class="col-md-4 col-xs-3">
                                <div class="col-md-3 col-xs-12" style="margin-top: 25px;">
                                    <img class="author-img"
                                         alt="达人头像"
                                         src="https://p1-dy.byteimg.com/aweme/1080x1080/1cafa00022c7918c31eb5.jpeg"
                                    />
                                </div>
                                <div class="col-md-9 col-xs-12">
                                    <div class="row">
                                        <div class="nick_font" style="margin-top: 10px">精致辣妈蓉儿</div>
                                    </div>
                                    <div class="row hidden-xs">
                                        <div class="label_span">运动健身</div>
                                        <div class="label_span">生活</div>
                                        <div class="label_span">美妆</div>

                                        广东省-广州市
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-xs-9 mini-zero-padding " style="margin-top: 20px">
                                <!--            中间数据标签-->
                                <div class="mini-zero-padding col-md-5 col-xs-8 col-md-offset-1">
                                    <div class="col-md-3 col-xs-4 ">
                                        <span class="num_font">587w</span>
                                        <br/>
                                        <span class="bottom_num_font">粉丝数</span>
                                    </div>
                                    <div class="col-md-1 zero_padding hidden-xs"
                                         style="position: relative;padding-left: 8px">
                                        <br/>
                                        <i class="fa fa-angle-double-right fans_show"
                                           style="font-size: 18px;margin-left: -20px;position: absolute;top: 15px">
                                        </i>
                                        <div style="display:none;width:120px;position: absolute;left: -120px;top:50px;z-index: 1;background-color:#fff;box-shadow: 0 0 15px #aaa;padding: 10px;border-radius: 12px;text-align: center">
                                            星图: &nbsp;<span class="num_font">587w</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-xs-4 zero_padding">
                                        <span class="num_font"> 271.90 </span>
                                        <br/>
                                        <span class="bottom_num_font">预期CPM</span>
                                    </div>
                                    <div class="col-md-1 zero_padding hidden-xs" style="position: relative">
                                        <br/>
                                        <i class="fa fa-angle-double-right fans_show" aria-hidden="true"
                                           style="font-size: 18px;margin-left: -9px;position: absolute;top: 15px">
                                        </i>
                                        <div style="display:none;width:120px;position: absolute;left: -120px;top:50px;z-index: 1;background-color:#fff;box-shadow: 0 0 15px #aaa;padding: 10px;border-radius: 12px;text-align: center">
                                            星图: &nbsp;<span class="num_font">271.90</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-xs-4 zero_padding">
                                        <span class="num_font">&nbsp;&nbsp;33w</span>
                                        <br/>
                                        <span class="bottom_num_font">预期播放量</span>
                                    </div>
                                    <div class="col-md-1 zero_padding hidden-xs" style="position: relative">
                                        <br/>
                                        <i class="fa fa-angle-double-right fans_show" aria-hidden="true"
                                           style="font-size: 18px;position: absolute;top: 15px">
                                        </i>
                                        <div id="player_show_panel"
                                             style="display:none;width:120px;position: absolute;left: -100px;top:50px;z-index: 1;background-color:#fff;box-shadow: 0 0 15px #aaa;padding: 10px;border-radius: 12px;text-align: center">
                                            星图: &nbsp;<span class="num_font">271.90</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="price_data col-md-6 col-xs-4 mini-zero-padding" style="margin-top: 5px">
                                    <div class=" price_data_num col-md-6 col-xs-12 col-md-offset-4"
                                         style="position: relative">
                                        <span class="doller_font">￥90000</span>
                                        <i class="fa fa-angle-double-right fans_show hidden-xs" aria-hidden="true"
                                           style="font-size: 18px;position: absolute;top: 7px;right: 55px">
                                        </i>
                                        <div id="price_show_panel"
                                             style="display:none;width:120px;position: absolute;left: 0px;top:40px;z-index: 1;background-color:#fff;box-shadow: 0 0 15px #aaa;padding: 10px;border-radius: 12px;text-align: center">
                                            星图: &nbsp;<span class="num_font">271.90</span>
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-xs-4  zero_padding mini-chonghe_btn"
                                         style="position: relative">
                                        <!--                <button style="display: inline-block">sd</button>-->
                                        <div type="button" class="btn btn-primary btn-sm chonghe_btn"
                                             style="padding: 2px;position: absolute;right: 0px;top: 3px">重合度
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-xs-4  zero_padding" style="position: relative">
                                        <div type="button" class="btn btn-primary btn-sm add_btn"
                                             style="padding: 2px;position: absolute;right: -8px;top: 3px">添加
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </button>
                </div>
                <div style="background-color:#fff;height: 80px">
                    <!--分页导航-->
                    <nav aria-label="Page navigation" style="float: right;margin-right: 100px">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!--行业属性-->
            <div id="type_property_panel" style="display: none">
                行业属性
                <div class="row mt">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <!--  BASIC PROGRESS BARS -->
                        <div class="showback">
                            <span style="margin-left: 20px;color: #333333">总体趋势上升，发展良好</span>
                            <div id="all_type_num_panel" style="height: 250px;"></div>

                        </div>
                        <!--/showback -->
                        <div class="showback">
                            粉丝重合度面板
                        </div>

                    </div>
                    <!-- /col-lg-6 -->
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <!--  粉丝增长取数 -->
                        <div class="showback">
                            <div id="fans_incre_panel" style="height: 250px;"></div>
                        </div>
                        <!-- /showback -->
                        <div class="showback">
                            其他面板
                            <div id="active_info"></div>
                        </div>
                        <!-- /showback -->
                    </div>
                    <!-- /col-lg-6 -->
                </div>
            </div>
        </section>
    </section>
    <!--main content end-->

</section>
<!-- js placed at the end of the document so the pages load faster -->


<script src="lib/jquery/jquery.min.js"></script>

<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="lib/jquery.scrollTo.min.js"></script>
<script src="lib/jquery.nicescroll.js" type="text/javascript"></script>
<script src="lib/jquery.sparkline.js"></script>
<!--common script for all pages-->
<script src="lib/common-scripts.js"></script>
<script type="text/javascript" src="lib/gritter/js/jquery.gritter.js"></script>
<script type="text/javascript" src="lib/gritter-conf.js"></script>
<!--script for this page-->
<script src="lib/sparkline-chart.js"></script>
<script src="lib/zabuto_calendar.js"></script>
<script type="text/javascript" src="myjs/data.js"></script>
<script type="text/javascript" src="myjs/search.js"></script>
<script type="text/javascript" src="myjs/a.js"></script>
<script src="lib/chart-master/Chart.js"></script>
<script src="myjs/venn.js"></script>
<script src="myjs/oldie.js"></script>
<script src="myjs/exporting.js"></script>

<script type="application/javascript">
    /*添加重合度*/
    $(".chonghe_btn").click(function () {
        if ($(this).attr('class').indexOf('btn-primary') >= 0) {
            $(this).removeClass('btn-primary')
            $(this).addClass("btn-danger")
            let name = $(this).parent().attr("mydata")
            $("#chong_btn").text(name)
        } else {
            alert("已添加到重合度计算面板中")
        }
    })

    /*行业总览、大人列表切换*/
    function switch_panel(a) {
        if (a == 0) {
            if ($("#data_panel").css("display") == "none") {
                $("#data_panel").css("display", "block")
                $("#type_property_panel").css("display", "none")
                $("#data_btn").addClass("btn-primary")
                $("#data_btn").removeClass("btn-default")
                $("#type_property_btn").addClass("btn-default")
                $("#type_property_btn").removeClass("btn-primary")
            }
        } else {
            if ($("#data_panel").css("display") == 'block') {
                $("#data_panel").css("display", "none")
                $("#type_property_panel").css("display", "block")
                $("#data_btn").removeClass("btn-primary")
                $("#data_btn").addClass("btn-default")
                $("#type_property_btn").addClass("btn-primary")
                $("#type_property_btn").removeClass("btn-default")
            }
        }
    }

    /*行业总有效用户趋势*/
    var chart = Highcharts.chart('all_type_num_panel', {
        title: {
            text: '行业有效用户数量'
        },
        xAxis: {
            lineWidth: 0,//去掉x轴线
            tickWidth: 0,//去掉刻度
            labels: {
                enabled: false
            },//去掉刻度数字
        },
        yAxis: {
            title: {
                text: '用户数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: '用户数',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    /*显示星图数据小工具*/
    $(".fans_show").hover(function () {
        $(this).next().css("display", "block")
    }, function () {
        $(this).next().css("display", "none")
    })
</script>
<script>
    $("#chong_btn").click(() => {
        let p = $("#chong_btn").parent()
        let right = parseInt(p.css("right"))
        if (right > 0) {
            p.css("right", "0px")
        } else {
            let width = $("#chong_btn").next().css("width")
            p.css("right", width)
        }
    })
    /*粉丝重合韦恩图*/
    Highcharts.chart('fan_press_panel', {
        series: [{
            type: 'venn',
            name: '粉丝重合度分布',
            data: [{
                sets: ['达人A'],
                value: 2,
                name: '达人A 50%'
            }, {
                sets: ['达人B'],
                value: 3,
                name: '达人B 66%'
            }, {
                sets: ['达人A', '达人B'],
                value: 1,
                name: '重合区域粉丝'
            }]
        }],
        title: {
            text: '<h2>达人A</h2>和达人B的粉丝重合度分布',
            style: {
                fontSize: '12px'
            }
        },
        exporting: {
            enabled: false
        }
    });

</script>
</body>

</html>
